<template>
	<view class="container">
		<view class="goods_contain">
			<u-waterfall class="goods_content" v-model="flowList">
				<template v-slot:left="{leftList}">
					<goodItme v-for="(item, index) in leftList" :img="item.image" :price="item.price":dec="item.dec" />
				</template>
				<template v-slot:right="{rightList}">
					<goodItme v-for="(item, index) in rightList" :img="item.image" :price="item.price" :dec="item.dec" />
				</template>
			</u-waterfall>
		</view>
	</view>
</template>

<script>
	import shopHead from '@/plugins/shop_header/shop_header.vue'
	import addBtn from "@/plugins/add_btn/add_btn.vue"
	import goodItme from "@/plugins/good_item/good_item.vue"
	// import footerBar1 from "@/plugins/footerBar1/footerBar1.vue"
	export default {
		data() {
			return {
				navlist: ["智能空调", "家用电器", "厨卫大电", "生活电器", "北欧家居", "热水器"],
				navIndex: 0,
				flowList: [{
						price: 35,
						title: '测试商品1',
						dec :'测试商品1的描述',
						image: '/static/image/goods_item.png',
					},
					{
						price: 75,
						title: '测试商品2',
						dec: '测试商品21231的描去啊阿萨大情为全文述',
						image: '/static/image/goods_item.png',
					},
					{
						price: 385,
						title: '测试商品3',
						dec: '李白杜甫白居易旗阿萨大阿萨大舰店',
						image: '/static/image/goods_item.png',
					},
					{
						price: 3825,
						title: '测试商品4',
						dec: '李白杜甫白居易旗阿萨大阿萨大舰店',
						image: '/static/image/goods_item.png',
					},
					{
						price: 3825,
						title: '测试商品4',
						dec: '李白杜甫白居易旗阿萨大阿萨大舰店',
						image: '/static/image/goods_item.png',
					},
					{
						price: 3825,
						title: '测试商品4',
						dec: '李白杜甫白居易旗阿萨大阿萨大舰店',
						image: '/static/image/goods_item.png',
					},
					{
						price: 3825,
						title: '测试商品4',
						dec: '李白杜甫白居易旗阿萨大阿萨大舰店',
						image: '/static/image/goods_item.png',
					},
					{
						price: 3825,
						title: '测试商品4',
						dec: '李白杜甫白居易旗阿萨大阿萨大舰店',
						image: '/static/image/goods_item.png',
					},
				]
			};

		},
		
		components: {
			shopHead,
			addBtn,
			goodItme,
			// footerBar1
		},
		methods: {
			navTap(index) {
				this.navIndex = index
			},

		}
	}
</script>

<style lang="scss" scoped>
	$paddingboth:20rpx;

	page {
		box-sizing: border-box;
		
		width: 100%;
		background-color: #f5f5f5;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		padding-bottom: 130rpx;
		box-sizing: border-box;
	}

	.select_cart {
		width: 100%;
		height: 160rpx;
		box-sizing: border-box;
		position: sticky;
		bottom: 0;
		margin-top: 40rpx;
		padding: 0 20rpx;

		.cart_cont {
			height: 100%;
			width: 100%;
			background: #fff;
			box-sizing: border-box;
			display: flex;

			flex-wrap: wrap;
			padding: 30rpx 0 0 10rpx;

			.cart_item {
				padding: 0 35rpx;
				font-size: 24rpx;

				.cart_font {
					border-bottom: 2px solid #4863EA;
					font-weight: 700;
					padding-bottom: 10rpx;

				}
			}
		}
	}

	.goods_contain {
		display: flex;
		flex-direction: column;
		flex: 1;
		box-sizing: border-box;
		padding: 0 $paddingboth;
	
		.goods_tp1 {
			box-sizing: border-box;
			height: 221rpx;
			width: 100%;

			.tp1_img {
				width: 100%;
				height: 100%;
			}

		}

		.goods_content {
		
			// display: flex;
			// flex-wrap: wrap;
			// box-sizing: border-box;
			width: 100%;
			// justify-content: space-between;

		}
	}
</style>
